<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=0.4, maximum-scale=2.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章详情</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="./css/article.css" rel="stylesheet">
    <link href="./css/common.css" rel="stylesheet">
    <link href="//at.alicdn.com/t/font_902790_g8dm7878bt.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.js"></script>
</head>
<body>
<div class="page">
    <!--头部-->
    <div class="header-body">
        <div class="zs-header container">
            <div class="pull-left zs-header-logo">
                <a href="index.html" style="color: #009cd9;"><span>招商资源</span></a>
            </div>
            <div class="input-group search">
                <input id="search_info" type="text" class="form-control" placeholder="请输入关键字">
                <span class="input-group-btn">
                     <button id="search_btn" class="btn btn-default" type="button">搜索</button>
                </span>
            </div>
            <!-- /input-group -->
            <!--<div class="pull-right">-->
            <!--<ul class="zs-header-menu">-->
            <!--<li>首页</li>-->
            <!--<li>招商政策</li>-->
            <!--<li>产业信息</li>-->
            <!--<li>联系我们</li>-->
            <!--</ul>-->
            <!--</div>-->
        </div>
    </div>
    <!--头部-->

    <div class="content">
        <div class="container">
            <div id="article_title" class="article-title">
                <h3></h3>
            </div>
            <div id="article_content" class="article-content">
            </div>
            <div id="pre_next" class="pre-next">
                <div id="previous" class="previous"></div>
                <div id="after" class="after"></div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="placeholder"></div>
    <footer>
        <div class="container">
            <ul>
                <li>
                    <span>关注公众号</span>
                    <div class="qrcode">
                        <img id="qrcode" src="" alt="">
                    </div>
                </li>

                <li>
                    <span>联系方式</span>
                    <div class="contact">
                        <p id="phone" class="text-center"></p>
                        <p id="mail" class="text-center"></p>
                        <p id="address" class="text-center"></p>
                        <p id="fax" class="text-center"></p>
                        <p id="supportHotline" class="text-center"></p>
                    </div>
                </li>
                <li>
                    <span>其他</span>
                    <div class="other-service">
                        <div><a href="" class="other1"></a></div>
                        <div><a href="" class="other2"></a></div>
                        <div><a href="" class="other3"></a></div>
                    </div>
                </li>
                <li>
                    <span>单位概况</span>
                    <a href="" class="other4"></a>
                </li>
            </ul>
        </div>
        <div class="record">
            <div class="container">
                <div class="pull-left"><a href="http://www.gxbhipb.gov.cn/" class="footer-links" target="_blank">北海市投资促进局</a>
                </div>
                <div class="pull-right">招商资源</div>
            </div>
        </div>
    </footer>
    <!-- 底部 -->
</div>
<!-- 图片模态框 -->


<div id="show_img_modal" class="modal fade show-img-modal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div id="img_modal" class="modal-content">
            <img src="" alt="">
        </div>
    </div>
</div>
<!-- 图片模态框 -->

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jQuery-jcMarquee.js"></script>
<script src="js/show_img.js"></script>
<script src="js/init.js"></script>
<script>

    $(function () {
        if ($(window).width() <= 1170) {
            $("footer").find("li").css("padding", "0 38px");
        }
            var articleId = getParameterByName("articleId");
            var categoryId = getParameterByName("categoryId");
            if ($(window).width() > 1170) {
                if (articleId == 284 || articleId == 285 || articleId == 287 || articleId == 288 || articleId == 283 || articleId == 281) {
                    $(".container").css("width", "1200px");
                } else {
                    $(".container").css("width", "1600px");
                }
            } else if ($(window).width() > 992) {
                if (articleId == 284 || articleId == 285 || articleId == 287 || articleId == 288 || articleId == 283 || articleId == 281) {
                    $(".container").css("width", "970px");
                } else {
                    $(".container").css("width", "970px");
                }
            } else if ($(window).width() > 768) {
                if (articleId == 284 || articleId == 285 || articleId == 287 || articleId == 288 || articleId == 283 || articleId == 281) {
                    $(".container").css("width", "750px");
                } else {
                    $(".container").css("width", "750px");
                }
            }
            $.ajax({
                url: SERVICE_URL + '/front/detail',
                type: 'get',
                contentType: 'application/json',
                dataType: "json",
                data: {
                    "articleId": articleId,
                    "categoryId": categoryId
                },
                success: function (res) {
                    if (res.code === 0) {
                        console.log(res);
                        $("#article_title").html(res.data.detail.title);
                        $("#article_content").html(res.data.detail.content);
                        if (res.data.previous) {
                            $("#previous").html('<a href="article.html?articleId=' + res.data.previous.articleId + '&categoryId=' + categoryId + '">上一篇：' + res.data.previous.title + '</a>');
                        }
                        if (res.data.after) {
                            $("#after").html('<a href="article.html?articleId=' + res.data.after.articleId + '&categoryId=' + categoryId + '">下一篇：' + res.data.after.title + '</a>');
                        }
                        $("table").parent().css("overflow-x", "auto");
                        //附件
                        if (res.data.detail.fileEntityList.length > 0) {
                            var fileDownload = '';
                            $(res.data.detail.fileEntityList).each(function (i, item) {
                                fileDownload = fileDownload + '<a href="' + SERVICE_URL + '/front/download?fileId=' + item.fileId + '" class="file-download"   style="cursor: pointer;color:blue">' + item.fileName + '.' + item.fileType + '</a><br>';
                            });
                            fileDownload = '<div style="margin-top: 30px;color:blue;">附件：<br>' + fileDownload + '</div>';
                            $("#article_content").append(fileDownload);
                        }

                        // 监听表格内的a标签，点击打开地图图片
                        $(".article-content").find("table").on("click", "a", function () {
                            var imgUrl = $(this).attr("href");
                            $("#img_modal").find("img").attr("src", imgUrl);
                            $('#show_img_modal').modal('show');
                            event.preventDefault();
                        });
                    } else {
                        alert("网络出错");
                    }
                },
                error: function (res) {
                    alert("网络出错");
                }
            });

            // 获取联系信息数据
            $.ajax({
                url: SERVICE_URL + '/front/contact',
                type: 'get',
                contentType: 'application/json',
                dataType: "json",
                success: function (res) {
                    if (res.code === 0) {
                        $("#phone").text('联系电话：' + res.data.phone);
                        $("#mail").text('邮箱：' + res.data.mail);
                        $("#address").text('地址：' + res.data.address);
                        $("#qrcode").attr('src', res.data.qrcode);
                        $("#fax").text('传真：' + res.data.fax);
                        $("#supportHotline").text('咨询电话：' + res.data.supportHotline);
                    }
                },
                error: function () {

                }
            });

            // 单位概况
            $.ajax({
                url: SERVICE_URL + '/front/more',
                type: 'get',
                contentType: 'application/json',
                dataType: "json",
                data: {
                    categoryId: 32,
                },
                success: function (res) {
                    if (res.code === 0) {
                        $(".other1").html(res.data.page.list[2].title);
                        $(".other1").attr('href', "article.html?categoryId=32&articleId=" + res.data.page.list[2].articleId);
                        $(".other2").html(res.data.page.list[1].title);
                        $(".other2").attr('href', "article.html?categoryId=32&articleId=" + res.data.page.list[1].articleId);
                        $(".other3").html(res.data.page.list[0].title);
                        $(".other3").attr('href', "article.html?categoryId=32&articleId=" + res.data.page.list[0].articleId);
                        $(".other4").html(res.data.page.list[3].title);
                        $(".other4").attr('href', "article.html?categoryId=32&articleId=" + res.data.page.list[3].articleId);
                    }
                },
                error: function () {

                }
            });

            // 监听搜索
            $("#search_btn").click(function () {
                var searchInfo = $("#search_info").val();
                window.location.href = ('./list.html?search=' + searchInfo);
            });


        }
    );
</script>
</body>
</html>